<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录注册界面</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="app">
			<a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
			<a href="#" @click.prevent="flag?flag=!flag:flag">注册</a>
			<login v-if="flag"></login>
			<reg v-else></reg>
		</div>
	    <template id="myLog">
		<div>
			<table>
				<tr>
					<td>账号</td>
					<td><input type="text" v-model="user" /></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" v-model="pwd" /></td>
				</tr>
				<tr>
					<td colspan="2"><button @click="log">登录</button></td>
				</tr>
			</table>
		</div>
	</template>
	<template id="zhuce">
		<div>
			<table>
				<tr>
					<td>账号</td>
					<td><input type="text" v-model="zuser" /></td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td><input type="text" v-model="zmeith" /></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" v-model="zpwd1" /></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" v-model="zpwd2" /></td>
				</tr>
				<tr>
					<td>手机号</td>
					<td><input type="tel" v-model="ztel" /></td>
				</tr>
				<tr>
					<td colspan="2"><button @click="zreg">注册</button></td>
				</tr>
			</table>
		</div>
	</template>
	</body>
	<script>
		//登陆组件
		Vue.component("login", {
			//template: "<div>登陆界面</div>",
			//登陆账号和密码
			template: "#myLog",
			data() {
				return {
					user: "",
					pwd: "",
				}
			},
			methods: {
				log() {
					console.log("登陆成功")
				}
			},
		})
		//注册组件
		Vue.component("reg", {
			//template: "<div>注册界面</div>"
			//账号，邮箱，密码，确认密码，手机号
			template: "#zhuce",
			data() {
				return {
					zuser: "",
					zmeith: "",
					zpwd1: "",
					zpwd2: "",
					ztel: "",
				}
			},
			methods: {
				zreg() {
					console.log("注册成功")
				}
			}
		})
		var vm = new Vue({
			el: "#app",
			data: {
				flag: true,
			}
		})
	</script>

</html>